<template>
  <qx-table :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="$t('Misc.AssignExecIP')" :submitText="$t('Submit')" width="500"
           @beforeClose="beforeClose" @confirm="submitForm">
    <qx-form ref="FormRef" v-model="formInfo" :option="tableOption"></qx-form>
  </q-modal>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { date } from 'quasar'
import { postAPI } from 'src/api'
import { createDialog } from 'src/utils/utils'
import { computed, onMounted, ref } from 'vue'

const ips = ref([])
const formInfo = ref({})
const FormRef = ref(null)
const searchForm = ref({})
const modalVisible = ref(false)

const tableOption = computed(() => {
  return {
    span: 22,
    page: false,
    export: true,
    readonly: true,
    column: [{
      label: `${i18n.t('TaskCore.TaskNumber')}`, field: 'taskId', minWidth: 80, maxWidth: 150, search: false
    }, {
      label: `${i18n.t('TaskCore.TaskDesc')}`, field: 'desc', minWidth: 80, maxWidth: 230
    }, {
      label: `${i18n.t('TaskCore.TaskTypes')}`, field: 'type', minWidth: 80, search: false
    }, {
      label: `${i18n.t('Misc.Expression')}`, field: 'expression', minWidth: 80, search: false
    }, {
      label: `${i18n.t('AGVCore.RegIP')}`, field: 'registeredIpList', minWidth: 80,
      format: val => (val || '').join(','), search: false
    }, {
      label: `${i18n.t('Misc.IsPause')}`, field: 'isPaused', minWidth: 80, useTag: true, display: false,
      format: val => val !== 'NO' ? i18n.t('Yes') : i18n.t('No'), tagColors: {
        [i18n.t('No')]: 'grey-4', [i18n.t('Yes')]: 'warning'
      },
      cellClick: row => handleIsPause(row), search: false
    }, {
      label: `${i18n.t('Misc.LastStatus')}`, field: 'lastStatus', minWidth: 80, useTag: true, display: false,
      options: [{
        label: i18n.t('Success'), value: 'SUCCESS', color: 'positive'
      }, {
        label: i18n.t('Fail'), value: 'FAIL', color: 'negative'
      }, {
        label: i18n.t('Unknown'), value: 'UNKNOWN', color: 'grey-4'
      }], search: false
    }, {
      label: `${i18n.t('Misc.LastBeginTime')}`, field: 'lastBeginTime', minWidth: 80, display: false,
      format: val => val ? date.formatDate(val, 'YYYY-MM-DD HH:mm:ss') : '', search: false
    }, {
      label: `${i18n.t('Misc.LastEndTime')}`, field: 'lastEndTime', minWidth: 80, display: false,
      format: val => val ? date.formatDate(val, 'YYYY-MM-DD HH:mm:ss') : '', search: false
    }, {
      label: `${i18n.t('Misc.AssignExecIP')}`, field: 'defaultExecutorIp', type: 'select', options: ips.value,
      minWidth: 80, cellClick: row => handleAssignIP(row), readonly: false, required: true, search: false,
      format: val => val || i18n.t('Nothing')
    }, {
      label: `${i18n.t('Misc.LastExecIP')}`, field: 'lastExecuterIp',
      minWidth: 80, display: false, search: false
    }]
  }
})

const remoteData = ref({ dicUrl: '/rcs/api/mySchedule/1001/getAllTask' })

onMounted(() => startSearch())

const formatSearchForm = () => {
  return { ...searchForm.value }
}
const handleAssignIP = row => {
  if (!row.defaultExecutorIp) {
    formInfo.value = { ...row }
    ips.value = row.registeredIpList || []
    formInfo.value.defaultExecutorIp = ips.value[0] || ''
    formInfo.value.registeredIpList = (row.registeredIpList || []).join(',')
    modalVisible.value = true
    return
  }
  createDialog({ msg: i18n.t('Misc.DefaultExecutorIp') }, () => {
    const { taskId } = row || {}
    postAPI('/rcs/api/mySchedule/1005/removeDefaultExecutor', { taskId }, () => startSearch())
  }, () => {})
}
const handleIsPause = row => {
  const { isPaused, taskId } = row || {}
  const msg = isPaused === 'NO' ? `${i18n.t('Misc.PauseTips')}` : `${i18n.t('Misc.ResumeTips')}`
  const urlInfo = isPaused === 'NO' ? '/rcs/api/mySchedule/1002/pauseTask' : '/rcs/api/mySchedule/1003/resumeTask'
  createDialog({ msg }, () => {
    postAPI(urlInfo, { taskId }, () => startSearch())
  }, () => {})
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
const beforeClose = () => {
  if (FormRef.value) FormRef.value.onReset()
  modalVisible.value = false
}
const submitForm = mDone => {
  FormRef.value.validate((form, done) => {
    const { taskId, defaultExecutorIp: registeredIp } = form
    postAPI('/rcs/api/mySchedule/1004/addDefaultExecutor', { taskId, registeredIp }, () => {
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => {
    mDone && mDone(false)
  })
}

</script>